<template>
	<view class="mine-content">
		<view class="header-bg"></view>

		<view class="flex-row justify-between u-avatar-container">
			<view class="flex-row align-center left">
				<view class="avatar-container">
					<image class="avatar" :src="userInfo.head_url||''" v-if="userInfo.mobile&&userInfo.mobile.length">
					</image>
					<image class="avatar" v-else></image>
				</view>
				<view class="flex-column u-name" v-if="userInfo.mobile&&userInfo.mobile.length">
					<text class="name">{{userInfo.nick_name}}</text>
					<text class="desc">ID：{{userInfo.id}}</text>
					<text class="desc">{{userInfo._mobile}}</text>
					<view class="role-view">
						<text class="role-text">
							<text>{{userInfo.is_auth==2?'认证':'普通'}}</text>
							<text v-if="userInfo.role===3">工人</text>
							<text v-else-if="userInfo.role===4">司机</text>
							<text v-else>用户</text>
						</text>
					</view>
				</view>
				<view @click="onRefreshAvatar" class="flex-column u-name" v-else>
					<view class="sync-btn">
						<text class="name">点击登录</text>
					</view>
					<text class="desc">登录后可见</text>
				</view>
			</view>
			
		</view>
		
		<view class="card-container">
			<view class="flex-row align-center justify-between font14 header">
				<view class="text-gray">
					<text>我的工具</text>
				</view>
				<view class=" text-gray">

				</view>
			</view>
			<view class="flex-row justify-around align-center p_t20 font18 main">
				<view class="grid grid-3">
				
				<view class="grid-item">
					<button open-type="share" class="flex-column align-center menu-item">
						<image class="icon" :src="require('@/static/icon/mine/tool3.png')"></image>
						<text class="text">使用帮助</text>
					</button>
				</view>
					<view class="grid-item">
						<button open-type="share" class="flex-column align-center menu-item">
							<image class="icon" :src="require('@/static/icon/mine/tool3.png')"></image>
							<text class="text">转发分享</text>
						</button>
					</view>
					<view class="grid-item">
						<button open-type="contact" class="flex-column align-center menu-item">
							<image class="icon" :src="require('@/static/icon/mine/tool5.png')"></image>
							<text class="text">联系客服</text>
						</button>
					</view>
					<!-- <view class="grid-item">
						<view class="flex-column align-center menu-item">
							<image class="icon" :src="require('@/static/icon/mine/tool6.png')"></image>
							<text class="text">帮助反馈</text>
						</view>
					</view> -->
					<view class="grid-item"></view>
					<view class="grid-item"></view>
				</view>
			</view>
		</view>

		
		<view class="footer-btn font12" style="color: #e1e1e1;">
			<text>---------------</text>
			<text>到底了</text>
			<text>---------------</text>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import Auth from "../../api/Auth.js"
	import Config from "../../vars/Config.js"
	import {
		toast,
		navigateTo,
	} from "../../utils/helpers.js"
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapState("user", [
				'userInfo'
			]),
			
		},
		onLoad() {
			this.$store.dispatch("user/getToken")
		},
		onShow() {
			this.$store.dispatch("user/getUserInfo")
		},
		async onShareAppMessage(options) {
			const shareObj = {
				title: Config.appName, // 默认是小程序的名称(可以写slogan等)
				path: '/pages/mine/mine', // 默认是当前页面，必须是以‘/’开头的完整路径
				// 　　　　imageUrl: '',     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			};
			return shareObj
		},
		methods: {
			toast,
			navigateTo,
			async onRefreshAvatar() {
				Promise.all([this._getCode(), this._getUserProfile()]).then(results => {
					Auth.getUserInfo(results[1], results[0].code).then(res => {
						this.$store.commit("user/setUserInfo", res)
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}).catch(err => {
						console.log(err)
						this.toast(err.message || "授权失败")
					})
				}).catch(err => {
					this.toast(err.message || "授权失败")
				})
			},
			_getUserProfile() {
				return new Promise((resolve, reject) => {
					uni.getUserProfile({
						desc: "用于完善个人信息！",
						success(res) {
							resolve(res)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},
			_getCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						success(res) {
							resolve(res)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mine-content {
		.grid {
			display: flex;
			width: 100%;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;

			.grid-item {
				flex: 1;
				flex-shrink: 0;
				padding-bottom: 20rpx;
			}

			&.grid-3 {
				flex-wrap: wrap;

				.grid-item {
					flex: none;
					width: calc(100% / 3);
				}
			}

			&.grid-2 {
				flex-wrap: wrap;

				.grid-item {
					flex: none;
					width: calc(100% / 2);
				}
			}

			&.grid-4 {
				flex-wrap: wrap;

				.grid-item {
					flex: none;
					width: calc(100% / 4);
				}
			}
		}

		.header-bg {
			background-color: $primayColor;
			width: 100%;
			position: absolute;
			// top: var(--status-bar-height);
			height: 300rpx;
			z-index: -999;
			border-radius: 0 0 50rpx 50rpx;
		}

		.u-avatar-container {
			padding: 0 40rpx;

			.sync-btn {
				.name {
					border-bottom: solid 1px #FFFFFF;
				}
			}

			.left {
				.avatar-container {
					width: 100rpx;
					height: 100rpx;
					overflow: hidden;
					border-radius: 100rpx;
					background-color: #92C8E0;

					.avatar {
						width: 100%;
						height: 100%;
						border-radius: 100rpx;
					}
				}

				.u-name {
					padding-left: 20rpx;
					padding-top: 5rpx;
					color: #FFFFFF;

					.name {
						line-height: 50rpx;
						font-size: 32rpx;
					}

					.desc {
						font-size: 24rpx;
						line-height: 40rpx;
					}

					.role-view {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						background-color: #FFFFFF;
						line-height: 40rpx;
						border-radius: 20rpx;
						color: $primayColor;
					}
				}
			}
		}

		.card-container {
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
			margin: 20rpx 20rpx;
			background-color: #FFFFFF;
			padding: 20rpx 20rpx;
			border-radius: 12rpx;

			.main {
				&.jobs {

					.cover {
						width: 128rpx;
						height: 120rpx;
					}

					.right {
						width: 50%;
					}
				}

				.menu-item {
					position: relative;
					border-width: 0;
					background-color: #FFFFFF;
					margin: 0;

					&:after {
						border: 0;
					}

					.icon {
						width: 60rpx;
						height: 60rpx;
					}

					.text {
						font-size: 26rpx;
						color: $textBlock;
					}

					.dot {
						position: absolute;
						top: 0;
						right: 10rpx;
						background-color: #ff0000;
						font-size: 20rpx;
						min-width: 50rpx;
						text-align: center;
						color: #fff;
						padding: 0 10rpx;
						border-radius: 100rpx;
					}
				}

			}
		}
	}
</style>
